<template>
  <div class="meio-container" ref='homePage'> 
	<router-view></router-view>
  </div>
</template>

<script>
export default {
	data(){
		return {
		clientHeight:"" // 屏幕高度
		}
	},
	created(){},
	mounted(){
		// 获取浏览器可视区域高度
		this.clientHeight =   `${document.documentElement.clientHeight}`          
		window.onresize = function temp() {
			this.clientHeight = `${document.documentElement.clientHeight}`;
		};
	},
	methods:{
		changeFixed(clientHeight){  //动态修改样式        
			this.$refs.homePage.style.height = clientHeight +'px';         
		},
	},
	watch:{
		// 如果 `clientHeight` 发生改变，这个函数就会运行
		clientHeight: function () {
			this.changeFixed(this.clientHeight)
		},
	}
}
</script>

<style lang="scss" scoped>
.meio-container{
	min-width: 1300px;
	height: 100%;
}
</style>
